import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:syn_4s/core/extension/build_context_extension.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/model/helmet_model.dart';
import 'package:syn_4s/ui/shared/app_theme.dart';

import '../../core/utils/date_format_utils.dart';
import '../../core/viewmodel/main_view_model.dart';
import 'custom_ui.dart';
import 'main_fold.dart';

class Main360Plant extends StatefulWidget {
  final Key? scrollKey;
  final MainViewModel viewModel;
  final String? title;

  const Main360Plant(
      {super.key, required this.viewModel, this.scrollKey, this.title});

  @override
  State<Main360Plant> createState() => _Main360PlantState();
}

class _Main360PlantState extends State<Main360Plant> {
  final ScrollController _controller = ScrollController();

  @override
  void initState() {
    super.initState();
    addScrollListener(_controller, widget.viewModel.is360PlantScrollable);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MainFold(
      scrollKey: widget.scrollKey,
      title: widget.title ?? context.l10n.plant_360,
      child: Container(
        margin: EdgeInsets.only(left: 8.px, right: 8.px, bottom: 6.px),
        height: 120.px,
        child: Obx(() => GridView.builder(
              controller: _controller,
              physics: widget.viewModel.isLockScrollable.value
                  ? const AlwaysScrollableScrollPhysics()
                  : const NeverScrollableScrollPhysics(),
              itemBuilder: (ctx, index) {
                return buildItem(
                    context, widget.viewModel.helmets.value.photos?[index]);
              },
              itemCount: widget.viewModel.helmets.value.photos?.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  childAspectRatio: 1.4,
                  crossAxisSpacing: 8.px,
                  mainAxisSpacing: 6.px,
                  crossAxisCount: 2),
            )),
      ),
    );
  }

  Widget buildItem(BuildContext context, HelmetPhotos? model) {
    return Container(
      margin: EdgeInsets.only(bottom: 8.px),
      // width: double.infinity,
      // height: 130.px,
      child: Stack(
        children: [
          Container(
            color: Colors.orange,
          ),
          Align(
              alignment: Alignment.bottomCenter,
              child: buildInfo(context, model?.deviceName, model?.portalOWAt)),
        ],
      ),
    );
  }

  Widget buildInfo(BuildContext context, String? title, DateTime? time) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(horizontal: 8.px),
      height: 40.px,
      color: AppTheme.greyShadowColor,
      child: Row(
        children: [
          Expanded(
            child: buildText(title ?? ""),
          ),
          Expanded(
              child: buildText(
                  DateFormatUtils.dateTimeToStr(time,
                      format: "dd-MM-yyyy HH:mm:ss"),
                  textAlign: TextAlign.end)),
        ],
      ),
    );
  }

  Widget buildText(String data, {TextAlign? textAlign}) {
    return Text(
      textAlign: textAlign,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      data,
      style: const TextStyle(color: Colors.white),
    );
  }
}
